<template>
  <div class="no-search">
    <div class="no-search__header">
      <div class="title">推荐搜索</div>
      <div class="more">
        <span>换一批</span>
        <img src="@/assets/images/sx2.png" />
      </div>
    </div>
    <div class="no-search__content">
      <span class="tag">运营</span>
      <span class="tag">数据分析</span>
      <span class="tag">运营</span>
      <span class="tag">数据分析</span>
      <span class="tag">运营</span>
      <span class="tag">数据分析</span>
    </div>
    <div class="no-search__header" style="margin-top: 30px">
      <div class="title">搜索历史</div>
      <div class="more" @click="handleClear">
        <span>清空</span>
        <img src="@/assets/images/scq.png" />
      </div>
    </div>
    <div class="no-search__content">
      <span class="tag">运营</span>
      <span class="tag">数据分析</span>
      <span class="tag">运营</span>
      <span class="tag">数据分析</span>
      <span class="tag">运营</span>
      <span class="tag">数据分析</span>
      <img class="more-icon" src="@/assets/images/xx.png" />
      <img class="more-icon" src="@/assets/images/xs.png" />
    </div>
    <van-popup
      v-model:show="showRight"
      position="right"
      :style="{ width: '223px', height: '90%' }"
    >345678</van-popup>
    <van-dialog v-model:show="show" class="showdialog">
      <div class="cont">
        <div class="cont-title">清空全部搜索历史？</div>
        <div class="crifbtn">
          <van-row gutter="32">
            <van-col span="12">
              <van-button round class="qx" @click="show = false">取消</van-button>
            </van-col>
            <van-col span="12">
              <van-button round type="success" class="qr">确认</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script setup>
import { ref  } from "vue";
import { showConfirmDialog } from "vant";
const showRight = ref(false);
const show = ref(false);
/**
 * 清空历史记录
 */
const handleClear = () => {
  show.value = !show.value;
};

</script>
<style lang="scss" scoped>
.no-search {
  padding: 10px 14px;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #27273f;
      line-height: 24px;
    }

    .more {
      display: flex;
      align-items: center;

      span {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #515167;
        line-height: 14px;
        margin-right: 4px;
      }

      img {
        width: 16px;
        height: 16px;
      }
    }
  }

  &__content {
    display: flex;
    flex-wrap: wrap;
    padding-top: 16px;
    margin: -6px;

    .tag {
      padding: 8px 12px;
      font-size: 14px;
      font-family: Helvetica;
      color: #27273f;
      line-height: 21px;
      background: #f4f6fa;
      border-radius: 100px;
      margin: 0 6px;
      margin-bottom: 12px;
    }

    .more-icon {
      width: 38px;
      height: 38px;
    }
  }
}
::v-deep(.showdialog) {
  --van-dialog-background: #ffffff;
  .cont {
    padding: 40px 50px 27px 50px;
    .cont-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #272b2d;
      line-height: 22px;
      text-align: center;
      font-style: normal;
    }
    .crifbtn {
      padding-top: 30px;
      .qx {
        width: 90px;
        height: 36px;
        background: #dadada;
        border-radius: 18px;
      }
      .qr {
        width: 90px;
        height: 36px;
        background: linear-gradient(126deg, #54d781 0%, #00c37d 100%);
        border-radius: 18px;
      }
    }
  }
}
::v-deep(.van-dialog__footer) {
  display: none;
}
</style>
